<template>
	<view class="shopping_box">
		<view class="shopping_box_top">
			<view class="">30天无忧退货</view>
			<view class="">48小时快速退款</view>
			<view class="">30满88元免邮费</view>
		</view>
		<!-- 数据渲染 -->
		<view class="shopping" v-if="!isShoppingCart">
			<u-checkbox-group v-model="result" placement="column" :disabled="isShowStepper">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="card">
						<view class="checkbox">
							<u-checkbox :customStyle="{ marginBottom: '8px' }" :name="item.id" @change="checkboxChange(item)"></u-checkbox>
							<u-swipe-action>
								<u-swipe-action-item :options="options1" @click="getCartDelete(item)">
									<view class="van_card" @click="jump(item.goodsSn)">
										<van-card
											class="van-card-box"
											:num="item.number"
											:price="item.price"
											:desc="item.specifications"
											:title="item.goodsName"
											:thumb="item.picUrl"
										/>
										<!-- 	<template v-if="bianji">
									<u-number-box v-model="item.number"  :min="1"  :max="100" ></u-number-box>
									</template> -->
									</view>
									<uni-number-box v-model="item.number" v-show="isShowStepper" @change="cartUpdate(item)"></uni-number-box>
								</u-swipe-action-item>
							</u-swipe-action>
						</view>
					</view>
				</block>
			</u-checkbox-group>
			<template v-if="uEmpty">
				<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</template>
		</view>

		<!-- 未登录看不到数据 -->
		<view class="" v-else>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			<view class="" style="width: 25%; margin: 0 auto; padding: 20px;"><u-button type="primary" text="请重新登录" @click="navigateTo"></u-button></view>
		</view>

		<!-- 全选编辑下单 -->
		<view class="vansubmitbar" v-show="bianji"> 
			<van-submit-bar :price="cartTotal.checkedGoodsAmount * 100" button-text="提交订单" @submit="onSubmit" :safe-area-inset-bottom="false">
				<van-checkbox v-model="isAllCheck" @change="Allselsct(item)" :disabled="isShowStepper">全选</van-checkbox>
				<template #tip>
					累计
					<span>{{ cartTotal.checkedGoodsCount }}</span>
					件商品,可点击
					<van-button :type="isShowStepper ? 'danger' : 'primary'" size="small" @click="isBtnstepper">{{ isShowStepper ? '完成编辑' : '编辑' }}</van-button>
					按钮进行商品数量修改
				</template>
			</van-submit-bar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			],

			isShoppingCart: true,
			//编辑状态
			bianji: false,
			isShowStepper: false,
			uEmpty: false,
			result: [], //选择数组
			cartList: [], //购物车商品列表
			cartTotal: {} //计算后的总量,价格等信息
		};
	},
	onShow() {
		this.getCartIndex();
		//this.getCartDelete();
		//this.getCartChecked();
	},

	computed: {
		//控制全选框状态
		isAllCheck: {
			get() {
				//当所有复选框被选中,数组的长度等于商品的长度
				return this.result.length == this.cartList.length ? true : false;
			},
			set(val) {
				let arr = [];
				this.cartList.map(item => {
					arr.push(item.productId);
				});
				if (this.result.length == arr.length) {
					this.$post(this.API.cartChecked, {
						isChecked: (val = false),
						productIds: arr
					}).then(res => {
						this.getCartIndex();
					});
				} else {
					this.$post(this.API.cartChecked, {
						isChecked: (val = true),
						productIds: arr
					}).then(res => {
						this.getCartIndex();
					});
				}
			}
		}
	},
	methods: {
		Allselsct() {},
		

		//登录
		navigateTo() {
			uni.$u.route('/pages/center/login');
		},
		//购物车商品列表
		getCartIndex() {
			this.$get(this.API.cartIndex).then(res => {
				console.log('aaa', res);
				//购物车总数
				this.cartTotal = res.data.data.cartTotal;
				this.cartList = res.data.data.cartList;
				let _this = this;
				if (_this.cartList.length == 0) {
					_this.uEmpty = true;
				} else {
					_this.uEmpty = false;
					
				}
				console.log('bbbb', this.cartList);
				//判断是否重新登录
				if (res.data.errno == 501) {
					this.isShoppingCart = true;
					_this.bianji=false
				} else if (res.data.errno == 0) {
					this.isShoppingCart = false;
					_this.bianji=true
				}

				this.result = [];
				this.cartList.map(item => {
					if (item.checked == true) {
						this.result.push(item.id);
					}
				});
				console.log('res', this.result);
			});
		},

		//选择或取消选择商品
		checkboxChange(item) {
			console.log(item);

			this.$post(this.API.cartChecked, {
				isChecked: item.checked == false ? true : false,
				productIds: [item.productId]
			}).then(res => {
				this.getCartIndex();
			});
		},
		//步进器
		isBtnstepper() {
			this.isShowStepper = !this.isShowStepper;
		},
		//更新购物车
		cartUpdate(item) {
			console.log(item);
			this.$post(this.API.cartUpdate, {
				productId: item.productId,
				goodsId: item.goodsId,
				number: item.number,
				id: item.id
			}).then(res => {
				console.log('tain', res);
				this.$get(this.API.cartIndex).then(res => {
					console.log('aaa', res);
					//购物车总数
					this.cartTotal = res.data.data.cartTotal;
					
				});
			});
		},

		//删除商品
		getCartDelete(item) {
			this.$post(this.API.cartDelete, {
				productIds: [item.productId]
			}).then(res => {
				this.getCartIndex();
			});
		},
		//传id到详情
		jump(index) {
			console.log(index);
			uni.navigateTo({
				url: '../../pages/productDetails/productDetails?id=' + index
			});
		},
		onSubmit() {
			uni.navigateTo({
				url:'../order/createOrder'
			})
			
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #eaeaea;
}

.shopping_box {
	height: 100vh;

	.shopping_box_top {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		font-size: 30rpx;
	}
	.shopping {
		height: 80vh;
		padding: -20rpx 10rpx;
		overflow: auto;
		.card {
			.u-demo-block__title {
				padding: 10px 0 2px 15px;
			}

			.swipe-action {
				&__content {
					padding: 25rpx 0;

					&__text {
						font-size: 15px;
						color: $u-main-color;
						padding-left: 30rpx;
					}
				}
			}

			.checkbox {
				display: flex;
				justify-content: space-around;
				.van_card {
					background-color: var(--card-background-color, #fafafa);
					width: 80vw;
				}
				.van-card-box {
				}
			}
		}

		/deep/.van-checkbox {
			border-bottom: 1px solid #c6c7cb;
		}
		/deep/ .van-checkbox__label {
			flex: 1;
			padding: 0.05rem;
		}
	}

	.delete-button {
		height: 100%;
	}
	.u-tabbar-bottom {
		position: fixed;
		bottom: 0;

		width: 100vw;
		height: 100rpx;
		/* #ifdef H5 */
		height: 200rpx;
		/* #endif */
		background-color: #ffffff;
		.bg-purple-light {
			display: flex;
			.u-button {
				margin: 10rpx;
			}
		}
	}
}
</style>
